import './index.scss'
import { Menu, Spin } from 'antd'
import { useMount } from 'ahooks'
import PropTypes from 'prop-types'
import { useCallback, useState } from 'react'

import { ICON } from '../../Utils/ICON'
import { GetIndexedDB } from '../../Utils/IndexedDB'

const MenuA01 = ({ OpenStatus, OpenEvent, MenuEvent }) => {
    MenuA01.propTypes = { MenuEvent: PropTypes.object, OpenEvent: PropTypes.object, OpenStatus: PropTypes.bool }

    const [Theme, setTheme] = useState()
    const [items, setItem] = useState([])
    const [loading, setLoading] = useState(true)
    const [openKey, setOpenKey] = useState([])

    const [OpenStatusMenu, setOpenStatusMenu] = useState(OpenStatus)

    const [SelectKey, setSelectKey] = useState('a0b4f6b8-ef44-4b43-925f-85a299eb52cb')

    const getItem = ({ uuid, isEnabled, other, mapping }) => {
        const { tableName, targetUrl, pageType, icon } = other
        return {
            key: uuid,
            label: mapping[uuid] || tableName,
            icon: icon ? ICON(icon) : null,
            enabled: isEnabled,
            url: targetUrl,
            pagetype: pageType,
        }
    }
    const getMenu = useCallback((menu, role, state, mapping) => {
        return menu.reduce((menuData, { uuid, isEnabled, children, type, ...other }) => {
            if (isEnabled === 0 || type === 1) return menuData
            const item = getItem({ uuid, isEnabled, other, mapping })
            if (!state && role.includes(uuid)) {
                if (children?.length) {
                    const childMenu = getMenu(children, role, state, mapping)
                    if (childMenu.length > 0) item.children = childMenu
                }
                menuData.push(item)
            } else if (state) {
                if (children?.length) {
                    const childMenu = getMenu(children, role, state, mapping)
                    if (childMenu.length > 0) item.children = childMenu
                }
                menuData.push(item)
            }
            return menuData
        }, [])
    }, [])

    useMount(async () => {
        const { MenuSet } = await GetIndexedDB('theme')
        const { userName } = await GetIndexedDB('user')
        const Menu = await GetIndexedDB('menu')
        const Role = await GetIndexedDB('role')
        const mapping = await GetIndexedDB('mapping')

        setTheme(MenuSet)
        const data = getMenu(Menu, Role, userName === 'tonzoc', mapping)
        setItem(data)
        setLoading(false)
    })

    MenuEvent.useSubscription(val => setSelectKey(val))
    OpenEvent.useSubscription(() => setOpenStatusMenu(!OpenStatusMenu))

    if (Theme) {
        const { blurState, blurColor, blurFilter } = Theme
        return (
            <div
                className="menuTemplate MenuA01"
                style={{
                    '--blurColor': blurColor,
                    '--blurFilter': blurFilter
                }}
            >
                {blurState && <div className='mask' />}
                <Spin spinning={loading}>
                    <Menu
                        selectedKeys={[SelectKey]}
                        openKeys={openKey}
                        inlineCollapsed={OpenStatusMenu}
                        inlineIndent={24}
                        mode="inline"
                        theme="light"
                        items={items}
                        onOpenChange={setOpenKey}
                        onClick={({ key }) => MenuEvent.emit(key)}
                    />
                </Spin>
            </div>
        );
    }


};

export default MenuA01;